﻿@model List<TrainningCategoryModel>
@{
    ViewBag.Title = "文艺培训";
    var bulletin = new
    {
        Url = "/Upload/html/trainning-bulletin.html",
        Title = "南山文化馆公益培训招生公告"
    };
}
<table>
    <tr><td><a href="@bulletin.Url" class="h3"> @bulletin.Title</a></td></tr>
    @foreach (var c in Model)
    {
        <tr>
            <td>
                @c.Name <a class="enroll-btn" href="@Url.Action("List", new {id = c.Id})">
                    <p>报 名</p></a>
            </td>
        </tr>
    }
    <tr><td><a href="@Url.Action("Search")" class="h3">报名记录</a></td></tr>
    <tr><td style="border:none"><a href="/Upload/html/trainning-code.html" class="h3">学员守则</a></td></tr>
</table>


@section css
{
    <style type="text/css">
        html, body, .body-content, table { height: 100% }
        body{background:#57A3C9}
         a,a:visited,a:link{color: white}
        table, tr, td { width: 100%; }
        tr {
            font-size: 30px;
            height: 16.6667%
        }
        td {
            position: relative;
            text-align: center;
            vertical-align: middle;
            border: 1px solid gray;
            border-width: 0 0 1px 0;
            color: white;
        }
        .enroll-btn {
            position: absolute;
            top: 30px;
            right: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            background: #4d4c4c;
            border-radius: 50%;
            font-size: 18px;
            display: table
        }
        .enroll-btn p { display: table-cell;color: white ;text-align: center;vertical-align: middle}
        .h3 {text-align: center;font-weight: normal;font-size: 18px;}

        @@media (max-width: 360px) {
            tr { font-size: 25px; }
            .enroll-btn {
                top: 22px;
                right: 10px;
                bottom: 10px;
                width: 50px;
                height: 50px;
                background: #4d4c4c;
                border-radius: 50%;
                font-size: 16px;
            }
              .enroll-btn p { margin: 14px 0 }
        }
    </style>
}